import React, { Component } from 'react';

class Demo extends Component {
    state = { count: 0 }

    // 对象式setState写法, 新状态不依赖原状态时用
    add1 = () => {
        const { count } = this.state
        // setState为同步方法, 但引起React的异步更新
        // 第二个参数回调函数, 在render之后才执行, 要获取最新的状态数据要在回调中获取
        this.setState({ count: count + 1 }, () => {
            console.log('回调中, 8行输出为', this.state.count);
        });
        // console.log('8行输出为', this.state.count);
    }

    // 函数式setState写法, 新状态依赖原状态时用
    // setState(updater, [callback]) updater是返回stateChange对象的函数, 可以接收到state和props
    add2 = () => {
        this.setState((state, props) => ({count: state.count + 1}));
    }

    render() {
        const { count } = this.state
        return (
            <div>
                <h1>当前求和为:{count}</h1>
                <button onClick={this.add2}>点我+1</button>
            </div>
        );
    }
}

export default Demo;